<template>
  <a-menu v-if="menuList.length" :mode="mode" @click="menuClick" :selectedKeys="selectKeys">
    <a-menu-item v-for="menu in menuList" :key="menu.id">
      <span>{{ menu.title }}</span>
    </a-menu-item>
  </a-menu>
  <div v-else/>
</template>

<script>
export default {
  name: "HomeTitleBar",
  props: {
    menuList: {
      type: [Array],
      default: () => ([]),
    },
    mode: {
      type: String,
      default: () => 'inline',
    },
    selectKey: {
      type: Array,
      default: () => ([]),
    }
  },
  watch: {
    menuList: {
      deep: true,
      handler: function (value) {
        this.getMenuList(value);
      }
    },
    '$route': {
      deep: true,
      handler: function () {
        this.getMenuList(this.menuList);
      }
    },
    selectKey: {
      deep: true,
      handler: function (value) {
        this.selectKeys = value
      }
    }
  },
  data() {
    return {
      selectKeys: []
    }
  },
  methods: {
    getMenuList(value) {
      this.$nextTick(() => {
        if (value.length > 0) {
          this.selectKeys = [value.find(item => this.$route.path === item.path).id];
        }
      })
    },
    menuClick({key}) {
      this.selectKeys = [key];
      this.$emit('menuClick', key)
    }
  }
}
</script>

<style scoped lang="less">
.ant-menu {
  height: 100%;

  > li {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 30px;
    letter-spacing: 2px;
    font-weight: bold;
    color: white;
  }

  >.ant-menu-item-selected , >.ant-menu-item-active{
    background-color: rgba(255, 255, 255, 0.6) !important;
    color: #1890ff !important;
    border-bottom: 6px solid #3296fa !important;
    > span {
      color: #1890ff;
      text-shadow: 6px 4px 4px rgba(35, 35, 35, .2);
    }
  }
}
</style>
